<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>dfs</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">标题</h1>
		</header>
		<div class="mui-content">

		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" data-index="0">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-index="1">
				<span class="mui-icon mui-icon-chatboxes"></span>
				<span class="mui-tab-label">发布需求</span>
			</a>
			<a class="mui-tab-item" data-index="2">
				<span class="mui-icon mui-icon-help"></span>
				<span class="mui-tab-label">小工具</span>
			</a>
			<a class="mui-tab-item" data-index="3">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">个人中心</span>
			</a>
		</nav>

		<script>
			mui.init();

			function cutWebviewId(url) {
				var startIndex = url.lastIndexOf("/");
				var endIndex = url.lastIndexOf(".html");
				var wvId = url.substring(startIndex - 1, endIndex);
				return wvId;
			}
			mui.plusReady(function() {
				/**
				 * 当前窗口对象，即父窗口；
				 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview
				 */
				var self = plus.webview.currentWebview();
				// 子窗口地址数组
				var subpages = ["home.html", "need.html", "tool.html", "user.html"];
				// 子窗口样式
				var subStyles = {
					top: "45px",
					bottom: "50px"
				};
				// 子窗口数量
				var subLen = subpages.length;
				// 子窗口对象数组
				var subWvs = [];
				// 标题栏
				var title = document.querySelector(".mui-title");
				// 底部选项
				var tabs = document.querySelectorAll(".mui-tab-item");
				// 底部文字
				var labels = document.querySelectorAll(".mui-tab-label");
				// 当前页面索引，初始化为0；
				var activeIndex = 0;
				// 目标页面索引，初始化为当前页面索引；
				var targetIndex = activeIndex;
				// 创建子页面
				for(var i = 0; i < subLen; i++) {

					/**
					 * 创建窗口对象，并将索引做为额外的参数传递；
					 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create
					 */
					var subWv = plus.webview.create(subpages[i], cutWebviewId(subpages[i]), subStyles, {
						index: i
					});
					// 窗口对象添加至数组
					subWvs.push(subWv);
					if(i > 0) {
						/**
						 * 隐藏非第一页的窗口对象
						 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.hide
						 */
						subWv.hide("none");
					}
					/**
					 * 向父窗口添加子窗口
					 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.append
					 */
					self.append(subWv);
				}
				// 底部选项卡点击切换事件
				for(var j = 0, jlen = tabs.length; j < jlen; j++) {
					tabs[j].addEventListener("tap", function() {
						// 获取当前结点的索引
						targetIndex = this.getAttribute("data-index");
						// 转换为number类型
						targetIndex = parseInt(targetIndex, 10);
						if(targetIndex == activeIndex) {
							return;
						}
						// 切换页面
						switchPage("tap", activeIndex, targetIndex);
					});
				}
				// 子页面滑动切换事件
				window.addEventListener("swipe_event", function(event) {
					// 获取方向以及索引
					var direction = event.detail.direction;
					activeIndex = event.detail.index;
					if(direction == "left") {
						// 如果是最后一个页面，则不做左滑切换；
						if(activeIndex == subLen - 1) {
							console.log("最右边一页了");
							return;
						}
						// 目标页面的索引为后面一位
						targetIndex = activeIndex - 1;
					} else {
						// 如果是第一个页面，则不做右滑切换；
						if(activeIndex == 0) {
							console.log("最左边一页了");
							return;
						}
						// 目标页面的索引为前面一位
						targetIndex = activeIndex - 1;
					}
					// 切换页面
					switchPage("switch", activeIndex, targetIndex);
				});

				/**
				 * 切换页面
				 * @param {String} _event 事件类型
				 * @param {Number} _active 当前页面索引
				 * @param {Number} _target 目标页面索引
				 */
				function switchPage(_event, _active, _target) {
					/**
					 * 目标页面展示
					 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.show
					 */
					subWvs[_target].show("fade-in");
					// 顶部文字替换
					title.innerText = labels[_target].innerText;
					// 如果是滑动事件，则手动切换高亮选项；
					if(_event == "switch") {
						tabs[_active].classList.remove("mui-active");
						tabs[_target].classList.add("mui-active");
					}
					// 之前展示的页面隐藏
					subWvs[_active].hide("none");
					// 更新当前页索引
					activeIndex = _target;
				}
			});
		</script>
	</body>

</html>